<template>
	<view class="zone">	
		<Header title="专属群聊"></Header>
		<view class="main">
			<view class="imagebox">
				<image class="gif" src="http://img.cpgm.cc/panda/static/wolfkill/xydts.gif" mode="widthFix" />
			</view>
			<view class="box">
				<h3>西游大逃杀专属群</h3>
				<p class="number">①群号码：326717819</p>
				<p class="number">②群号码：544640615</p>
				<p class="explain">以下为大逃杀专属群，其他玩家勿进，此群仅限聊大逃杀相关内容；聊其他内容第一次警告，第二次禁言，第三次飞机</p>

				<image src="http://img.cpgm.cc/panda/static/wolfkill/group2.png" mode="widthFix" />
				<p class="sao">扫一扫二维码，加入群聊</p>

				<view class="button" @click="enjoyqq">一键加群</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qqurl: 'https://qm.qq.com/cgi-bin/qm/qr?k=HCTGdBfYTmXrl0mQuFccXCNb_YLsYnZs&jump_from=webapi&authKey=HShlKKJNAdGsDnE8B6TvsSRHf6Vw6wKpWVpEIoMKOdhA/msQdL+TM20n+a4KUAxQ',
			};
		},
		methods: {
			// 一键加群
			enjoyqq() {
				if (window.plus) {
					if (this.$u.os() == 'ios') {
						location.href = this.qqurl
					} else if (this.$u.os() == 'android') {
						let w = plus.webview.create(this.qqurl);
						w.show();
						setTimeout(() => {
							plus.webview.close(w)
						}, 3500);
					} else {
						location.href = this.qqurl
					}
				}else {
					location.href = this.qqurl
				}
			},
		},
	}
</script>

<style lang="less">
.zone {
	background: linear-gradient(180deg, #C7DDDA 0%, #C7DDDA 100%);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	min-height: 100vh;
}

.main {
	padding: 12px;
}
.box {
	position: relative;
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 20px;

	h3 {
		color: #000;
		font-size: 18px;
		text-align: center;
		margin-bottom: 5px;
	}

	.number {
		color: #343434;
		font-size: 13px;
		font-weight: 600;
		font-size: 14px;
		margin: 2px 0;
	}

	.explain {
		color: #696969;
		font-size: 12px;
		text-align: center;
		line-height: 18px;
		margin-top: 10px;
	}

	image {
		width: 50%;
		margin: 20px 0;
	}

	.sao {
		color: #343434;
		font-size: 12px;
	}

	.button {
		width: 80%;
		height: 54px;
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		margin-top: 20px;
		color: #fff;
		font-size: 14px;
	}
}

.imagebox {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gif {
	width: 50%;
	border-radius: 10px;
}



</style>
